<template>
  <el-card>
    <div slot="header">
      <h3>{{ getPageTitle() }}</h3>
    </div>
    <div class="body_wrap">
      <div class="supply_info">
        <SupplyInfo
          isView
          :supplyInfo="supplyInfo"
        />
        <el-divider content-position="center"></el-divider>
        <!-- 发起原因输入框 -->
        <LaunchReasonInput isDisabled :reason.sync="launchReason" />
        <el-divider content-position="center"><i class="el-icon-info"></i>多供信息</el-divider>
        <el-row>
          <SkusTable
            :dataSource="infoTable.list"
            :columns="infoTable.columns"
            :maxTableHeight="480"
          />
        </el-row>
      </div>
      <div class="supply_purchase">
        <el-row type="flex" align="middle">
          <p>供货价格方式：</p>
          <span>{{ getSupplyPriceTypeStr() }}</span>
        </el-row>
        <el-divider content-position="center"><i class="el-icon-place"></i>参照城市比例</el-divider>
        <el-row type="flex" justify="space-between">
          <SkusTable
            :defaultMinWidth="100"
            :maxTableHeight="480"
            :dataSource="referenceCity.list"
            :columns="referenceCity.columns"
          />
        </el-row>
        <el-divider content-position="center"><i class="el-icon-price-tag"></i>多供进价</el-divider>
        <el-row type="flex" justify="end">
          <el-button
            type="text"
            size="large"
            :loading="btnLoading.export"
            @click="handleExportTemplate"
          >导出模板</el-button>
        </el-row>
        <el-row>
          <SkusTable
            :defaultMinWidth="100"
            :maxTableHeight="480"
            :dataSource="purchaseTable.list"
            :columns="purchaseTable.columns"
          />
        </el-row>
        <!-- 表尾字段 -->
        <FooterFields :footerFields="footerFields" />
      </div>
    </div>
  </el-card>
</template>
<script>
import infoApi from './api';
import infoUtils from './utils';
import SupplyInfo from '@/pages/commodity/components/SupplyInfo';
import SkusTable from '@/components/skusTable';
import LaunchReasonInput from '@/components/LaunchReasonInput';
import FooterFields from '@/pages/commodity/components/FooterFields';
import { getEchoTextByValue } from '@/utils/getUtils';
import singleColumns from './constants/singleColumns';
import multipleColumns from './constants/multipleColumns';
import infoColumns from './constants/moreSupplyInfoColumns';
export default {
  components: {
    SupplyInfo,
    SkusTable,
    LaunchReasonInput,
    FooterFields
  },
  data () {
    return {
      launchReason: '',
      footerFields: {}, // 表尾字段
      supplyInfo: {}, // 供应商信息
      purchaseType: '', // 供货价格方式
      isPurchaseMultiUnit: '', // 计量类别
      referenceCity: { // 参照城市
        list: [],
        columns: [
          { title: '销售城市', key: 'saleCityName' },
          {
            title: '是否供货',
            render: (h, { row }) => {
              return <span>{getEchoTextByValue({ val: row.isSupply })}</span>;
            }
          },
          { title: '区域', key: 'saleAreaName' },
          { title: '参照城市', key: 'templateCityName' },
          { title: '进价比例', key: 'buyPriceRatio' },
          { title: '成本价比例', key: 'costPriceRatio' }
        ]
      },
      infoTable: { // 多供信息
        list: [],
        columns: infoColumns.viewMoreSupplyInfoColumns
      },
      purchaseTable: { // 多供进价
        list: [],
        columns: []
      },
      btnLoading: {
        export: false
      }
    }
  },
  mounted () {
    this.loadInitDataInMounted();
  },
  methods: {
    getPageTitle () {
      const title = '新增多供进价';
      if (this.isPurchaseMultiUnit === '1') {
        return `${title}-多计量`;
      }
      return title;
    },
    // 获取供货价格方式文本
    getSupplyPriceTypeStr () {
      return getEchoTextByValue({
        val: this.purchaseType, firstText: '统一进价', secondText: '区域进价'
      });
    },
    // 加载初始数据在mounted时期
    loadInitDataInMounted () {
      this.setInfoDataByRecordNo();
    },
    async setInfoDataByRecordNo () {
      const { recordNo } = this.$route.query;
      const retData = await infoApi.getRecordInfo(recordNo);
      if (retData) {
        const {
          isPurchaseMultiUnit,
          supplyPriceType,
          supplySkuRels,
          supplyAreaParams,
          supplyAreaPriceParams,
          launchReason
        } = retData.productRel;
        this.footerFields = retData.recordDetail;
        this.supplyInfo = infoUtils.getSupplyInfo(retData.productRel);
        this.isPurchaseMultiUnit = isPurchaseMultiUnit;
        this.purchaseType = supplyPriceType;
        this.referenceCity.list = supplyAreaParams;
        this.infoTable.list = supplySkuRels;
        this.purchaseTable.list = supplyAreaPriceParams;
        this.launchReason = launchReason;
        this.setColumnsByUnitType();
      }
    },
    setColumnsByUnitType () {
      if (this.isPurchaseMultiUnit === '1') { // 多计量
        this.setPurchaseTableColumns(multipleColumns);
      }
      if (this.isPurchaseMultiUnit === '2') { // 单计量
        this.setPurchaseTableColumns(singleColumns);
      }
    },
    setPurchaseTableColumns (columns) {
      if (this.purchaseType === '1') { // 统一进价
        this.purchaseTable.columns = columns.viewUnifiedColumns;
      }
      if (this.purchaseType === '2') { // 区域进价
        this.purchaseTable.columns = columns.viewAreaColumns;
      }
    },
    // 获取导出Excel名
    getExcelName () {
      const nameByUnit = {
        '1': '多供进价-多计量模板',
        '2': '多供进价-单计量模板'
      }
      return nameByUnit[this.isPurchaseMultiUnit] || '';
    },
    // 导出模板
    handleExportTemplate () {
      infoApi.exportPurchaseDataByView(
        this.$route.query.recordNo,
        () => { this.btnLoading.export = true; },
        () => { this.btnLoading.export = false; },
        this.getExcelName()
      )
    }
  }
}
</script>
